<!--
 * Copyright (c), 农业农村部.
 * All rights reserved.
-->

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
	<meta name="author" content="农业农村部" />
	<meta name="description" content="" />

	<title>农业农村市场信息监测统计系统</title>

	<!-- 图标 -->
	<link rel="icon" type="image/png" href="app-icon.png" />

	<!-- CSS -->
	<link rel="stylesheet" href="mdc/material-components-web.min.css" />
	<link rel="stylesheet" href="css/materialdesignicons.min.css" />
	<link rel="stylesheet" href="css/pittypat.min.css" />
	<style>
		/* 页眉 */
		body > header {
			position: static;
			background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTkyMHB4IiBoZWlnaHQ9IjI1MnB4IiB2aWV3Qm94PSIwIDAgMTkyMCAyNTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE5MjAgMjUyIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBvcGFjaXR5PSIwLjIiIGZpbGw9IiNmZmZmZmYiIGQ9Ik0yMjcuMTA1LDE0Ny42N2MwLjk3MS0xNy43NTMsMjEuNDY4LTM1LjY3LDQ0LjQ3My0yNS45NjIgYy0xLjExNy05LjA2OS0yLjY1Mi0xOC44MTUsNS45MTYtMjUuODU0YzcuOTg3LTYuNTYzLDE5LjcwMS02LjkwOCwyOS40MDYtMi41MDJjMC40NTctMzQuNjQ0LDczLjE1Ni0zNi44MjEsODIuMjcxLTUuMDk1IGwtMC44NTgsMS4xOThjMS41NzYtMC4zMTQsNS4zODEtNC45NzYsOC4yODctNi44NDhjMy43MTktMi4zOTQsOC4yNDQtNC4xODMsMTIuNzk3LTUuNDAyYzkuNi0yLjU2OSwxOC43MTYtMy4wNzksMjguODk1LTEuNDgyIGMxMC45ODYsMS43MjQsMjEuMjUyLDcuMDE4LDI3Ljg0MSwxNC41NDljNy4wNzEsOC4wODIsNi4zNywxNC4zNDMsNi4zMjksMjMuNTcxYzI1Ljc3MS0xNi4yOSw2NS4xOTQsMjEuODA4LDMwLjgxMyw0Mi4yNjkgYzMxLjk1MSwyMS40NzgtMjMuNDM0LDUyLjcwNy01NS4wMzcsMjkuNjI3Yy00Ljg0MSwxMS40MTUtMTUuMTg3LDE5LjgzNi0zMS4xMiwyMC40NjljLTEyLjcwNCwwLjUwNS0zMi41NTUtMS45OTEtNDIuMDUzLTkuMDU1IGMtMTEuMDgxLDE0LjgwOC0zMi4yMjUsMTYuOTQ0LTUyLjMxLDEzLjM2OGMtMTYuNTUtMi45NDYtNDcuNzQ3LTEyLjMyNS00OS43Ny0yOC45NGMtNC40MjUtMS4yNDgtOS43MzUsMC40MjUtMTQuNjQxLTAuMzIgYy02LjQxMi0wLjk3NS0xMS44MTMtMy40NDktMTYuNjYzLTcuMDM4QzIzMi4yOTcsMTY3LjI3OSwyMjYuNTUsMTU3LjgzNiwyMjcuMTA1LDE0Ny42N3ogTTc3OC44NzUsNzIuNDA5IGMxNS4zNzQsMCwyOS44OTMtMi4yNjUsNDIuNzY1LTYuMjdjMTMuMDksNi40NDgsMzEuOTQ5LDEwLjUyMyw1Mi45OTEsMTAuNTIzYzI5LjM3MywwLDU0LjU4My03LjkwMiw2NS41OTYtMTkuMTk0IGMxLjIwOCwwLjAxOSwyLjQxLDAuMDYsMy42MjQsMC4wNmMxNS4xMzksMCwyOS42NjgtMS42NDMsNDMuMjM4LTQuNjIxYzkuMjU1LDcuNzk3LDI3LjczMywxMy4xMjUsNDkuMDUyLDEzLjEyNSBjMTcuNTQ1LDAsMzMuMTUzLTMuNjEzLDQzLjMwMS05LjIzMmM0LjMwMywwLjQ2OSw4LjcxOSwwLjczLDEzLjIzMiwwLjczYzIyLjExLDAsNDIuMDMxLTUuODgsNTYuMTIxLTE1LjI5MiBjOC4yMDksNy44NjcsMjMuMzgyLDEzLjE2NCw0MC43ODgsMTMuMTY0YzI2LjEyLDAsNDcuMjk4LTExLjg5OSw0Ny4yOTgtMjYuNTc0YzAuMDAzLTE0LjY4NC0yMS4xNzYtMjYuNTc5LTQ3LjI5Ni0yNi41NzkgYy03LjExMiwwLTEzLjgzMSwwLjkwNS0xOS44ODEsMi40ODRjLTAuMTk5LTEuNjAyLTAuNTI0LTMuMTgxLTAuOTYxLTQuNzM1SDY4NS4zNzNjLTEuNDcyLDQuMTQ4LTIuMjU1LDguNDU3LTIuMjU1LDEyLjg4IEM2ODMuMTE4LDQ1Ljc2LDcyNS45OSw3Mi40MDksNzc4Ljg3NSw3Mi40MDl6IE0xNTc1Ljk2NywxMzUuNjEyYzAsMCwzLjQ2Mi0yNi4wNTktMzAuNzEyLTIyLjk3OWMwLDAtMTAuMzM1LTI3LjItNDQuNTMxLTI2Ljc2NyBjMCwwLTM0LjE5NiwwLTQwLjY4NSwyNy4yNTJjMCwwLTI1LjUyMS0yLjE2My0zMi4wMSwyMS4xOTZjMCwwLTI0LjIyNC0xLjI5Ny0yNS4wODksMjYuMzg3YzAsMCw0LjMyNiwzMS41NzcsMzQuNjA1LDE4LjYgYzAsMCwxNC43MDksMjAuMTAxLDQwLjIyOSwzLjEzYzAsMCwyNS41MjEsMjMuMjU3LDQ4Ljg3OS0yLjY5N2MwLDAsMTkuODk5LDE4LjE2OSwzNS45MDQsMC40MzNjMCwwLDI3LjY4MywxNS4xMzksMzUuOTAyLTIwLjc2NCBDMTU5OC40NiwxNTkuNDAzLDE2MDAuNjI0LDEzNC4zMTQsMTU3NS45NjcsMTM1LjYxMnoiLz48L3N2Zz4=");
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
		}

		/* 登录图标与名称 */
		.logo-name {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 8px 0 32px 0;
			box-sizing: border-box;
		}

			/* 登录图标背景 */
			.logo-name > div {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 144px;
				height: 144px;
				border-radius: 50%;
				background-color: var(--mdc-theme-background, #fff);
			}

			/* 登录图标 */
			.logo-name img {
				width: 90px;
				height: 90px;
			}

			/* 登录名称 */
			.logo-name > h1 {
				flex: 1 1 auto;
				font-size: 24px;
				font-weight: 600;
				margin: 0;
				padding: 24px 16px 0 16px;
				box-sizing: border-box;
				height: 50px;
				width: 100%;
				line-height: 24px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color: #fff;
				text-align: center;
			}

		@media (min-width: 600px) {
			.logo-name > h1 {
				padding: 24px 28px 0 28px;
				font-size: 2em;
				height: 55px;
			}
		}

		/* 工作区 */
		.pt-main {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 16px;
			background: linear-gradient(0deg, var(--page-background, #f6f7f9) 0, var(--page-background, #f6f7f9) 61.8%, var(--mdc-theme-primary, #03a9f4) 61.8%, var(--mdc-theme-primary, #03a9f4) 100%);
			margin-top: 0;
		}

		@media (min-width: 600px) {
			.pt-main {
				padding: 0 28px;
			}
		}

		.pt-main > article {
			width: 100%;
			background-color: #fff;
			border-radius: 10px;
			padding: 16px 24px;
		}

		@media (min-width: 480px) {
			.pt-main > article {
				width: 88%;
				min-width: 400px;
			}
		}

		@media (min-width: 840px) {
			.pt-main > article {
				width: 550px;
			}
		}

		.login-header {
			display: flex;
			align-items: center;
		}

			.login-header > :first-child {
				flex: 1 1 auto;
				overflow: hidden;
			}

			.login-header > :last-child {
				flex: 0 0 auto;
				margin-left: 16px;
			}

			.login-header h1 {
				padding: 0;
				margin: 0;
				font-weight: 400;
				font-size: 1.5em;
				height: 24px;
				line-height: 24px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.login-header time {
				display: block;
				font-size: 14px;
				height: 20px;
				line-height: 20px;
				color: rgba(0, 0, 0, .62);
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.login-header a {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 52px;
				height: 52px;
			}

			.login-header i {
				display: block;
				width: 52px;
				height: 52px;
				font-size: 52px !important;
				color: var(--mdc-theme-text-icon-on-light, rgba(0, 0, 0, .38));
				background-size: 52px;
				background-repeat: no-repeat;
				background-position: center;
				border-radius: 50%;
			}

		.login-body,
		.login-footer {
			padding: 16px 0;
		}

		#login-captcha {
			text-transform: uppercase;
		}

		.login-footer {
			display: flex;
			align-content: center;
			justify-content: center;
		}

		#login-submit {
			width: 50%;
			min-width: 160px;
		}

		/* 页脚 */
		body > footer > section {
			padding: 16px;
		}

		@media (min-width: 600px) {
			body > footer > section {
				padding: 20px 28px;
			}
		}

		body > footer p {
			text-align: center;
			font-size: 16px;
			color: var(--mdc-theme-text-secondary-on-light, rgba(0, 0, 0, .62));
		}

		.captcha-img {
			cursor: pointer;
			visibility: hidden;
		}
	</style>
</head>
<body>
	<!-- 页眉 -->
	<header>
		<section class="pt-page-toolbar">
			<button class="pt-nav-toggle mdc-ripple-surface" type="button" data-mdc-ripple-is-unbounded data-mdc-auto-init="MDCRipple">
				<i class="mdi mdi-menu"></i>
			</button>
			<h1 class="pt-page-title"></h1>
			<!-- <button class="pt-nc-toggle mdc-ripple-surface" type="button" data-mdc-ripple-is-unbounded data-mdc-auto-init="MDCRipple">
				<i class="mdi mdi-message-outline"></i>
				<b></b>
			</button>
			<button class="pt-page-menu-toggle mdc-ripple-surface" type="button" data-mdc-ripple-is-unbounded data-mdc-auto-init="MDCRipple">
				<i class="mdi mdi-dots-vertical"></i>
			</button>
			<div class="pt-page-menu mdc-simple-menu mdc-simple-menu--open-from-top-right" tabindex="-1">
				<div class="mdc-simple-menu__items mdc-list" role="menu" aria-hidden="true">
					<a class="mdc-list-item pt-page-refresh" role="menuitem" tabindex="0">
						<i class="mdi mdi-refresh mdc-list-item__start-detail"></i>
						<span>刷新页面</span>
					</a>
					<div class="mdc-list-divider" role="separator"></div>
					<a class="mdc-list-item" role="menuitem" tabindex="0" href="help/index.html" target="_blank">
						<i class="mdi mdi-help mdc-list-item__start-detail"></i>
						<span>查看帮助</span>
					</a>
					<div class="mdc-list-divider pt-page-menu-logout-divider" role="separator"></div>
					<a class="mdc-list-item pt-page-menu-logout" role="menuitem">
						<i class="mdi mdi-logout mdc-list-item__start-detail"></i>
						<span>退出</span>
					</a>
				</div>
			</div> -->
		</section>
		<section class="logo-name">
			<div>
				<img src="app-icon.png" alt="" />
			</div>
			<h1 id="sys-name">农业农村市场信息监测统计系统</h1>
		</section>
	</header>

	<!-- 工作区 -->
	<main class="pt-main" role="main">
		<article class="mdc-elevation--z9">
			<header class="login-header">
				<div>
					<h1>登录</h1>
					<time>日期</time>
				</div>
				<div>
					<a>
						<i class="mdi mdi-account-circle"></i>
					</a>
				</div>
			</header>
			<section class="login-body">
				<form action="">
					<div class="pt-fields">
						<div class="pt-field">
							<label>
								<b class="mdi mdi-account-outline"></b>
								<input id="login-name" type="text" maxlength="50" placeholder="用户账号" title="不区分大小写" required autofocus autocomplete="off" />
							</label>
						</div>
						<div class="pt-field">
							<label>
								<b class="mdi mdi-lock-open-outline"></b>
								<input id="login-password" type="password" maxlength="30" placeholder="登录密码" title="区分大小写" required autocomplete="off" />
							</label>
						</div>
						<div class="pt-field">
							<label>
								<b class="mdi mdi-shield-key-outline"></b>
								<input id="login-captcha" type="text" maxlength="4" placeholder="验证码" title="4 个字符，不区分大小写" required autocomplete="off" />
								<img width="130px" height="48px" class="captcha-img" title="点击刷新验证码" />
							</label>
						</div>
					</div>
				</form>
			</section>
			<footer class="login-footer">
				<button class="mdc-button mdc-button--raised mdc-button--primary mdc-ripple-surface" data-mdc-auto-init="MDCRipple" id="login-submit" type="button">
					登录
				</button>
			</footer>
		</article>
	</main>

	<!-- 页脚 -->
	<footer>
		<section>
			<p id="contact-info">技术支持联系方式：010-59195811</p>
			<!-- <p id="org-name">农业农村部数据资源处</p> -->
		</section>
	</footer>

	<!-- 导航列表 -->
	<nav class="pt-nav">
		<!-- 导航列表的背景，不要移除该元素 -->
		<div></div>
		<article class="pt-nav-panel">
			<header>
				<div class="pt-nav-toolbar">
					<a class="pt-nav-refresh mdc-ripple-surface" data-mdc-ripple-is-unbounded data-mdc-auto-init="MDCRipple" title="刷新导航">
						<i class="mdi mdi-refresh-circle"></i>
					</a>
					<a class="pt-nav-pin mdc-ripple-surface" data-mdc-ripple-is-unbounded data-mdc-auto-init="MDCRipple" title="固定导航" data-nav-pin>
						<i class="mdi mdi-arrow-collapse-right"></i>
					</a>
				</div>
				<div class="pt-nav-userbar">
					<a href="com/waln/authority/profile/index.html">
						<i class="mdi mdi-account-circle"></i>
						<b>未登录</b>
					</a>
				</div>
			</header>
			<section></section>
		</article>
	</nav>

	<!-- 通知中心 -->
	<aside class="pt-nc">
		<!-- 通知中心的背景，不要移除该元素 -->
		<div></div>
		<article class="pt-nc-panel">
			<header>
				<a class="pt-nc-close mdc-ripple-surface" data-mdc-ripple-is-unbounded data-mdc-auto-init="MDCRipple" data-nc-close>
					<i class="mdi mdi-close"></i>
				</a>
				<h1>通知中心</h1>
				<a class="mdc-ripple-surface" data-mdc-ripple-is-unbounded data-mdc-auto-init="MDCRipple" href="com/waln/notifying/inbox/list.html" title="所有已接收">
					<i class="mdi mdi-inbox"></i>
				</a>
			</header>
			<section></section>
		</article>
	</aside>

	<!-- JS -->
	<!-- 参考 http://jquery.com/ (英文) -->
	<script src="js/jquery.min.js"></script>
	<!-- 参考 https://material.io/ (英文) -->
	<script src="mdc/material-components-web.min.js"></script>
	<!-- 在登录时加密用户名和密码 -->
	<script src="js/jsencrypt.min.js"></script>
	<!-- pittypat 基础代码 -->
	<script src="js/pittypat.min.js"></script>
	<script src="com/waln/authority/sysinfo/_api.js"></script>
	<!-- 页面代码 -->
	<script src="index.js"></script>
</body>
</html>
